<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>websocket</title>
    <script type="text/javascript" src="../static/js/sockjs-client/1.0.2/sockjs.min.js"></script>
    <script type="text/javascript" src="../static/srm/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../static/srm/jquery/jquery.validate.min.js"></script>
    <link href="../static/css/websocket.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="whole_area">
    <!--左 -->
    <div class="chart_friend_area">

    </div>
    <!--中，聊天内容显示区-->
    <div class="chart_area">
        <div class="chart_msg">
            <ul id="chart_msg">

            </ul>
        </div>
        <div class="face_icon">

        </div>
        <div class="send_msg">
            <textarea id="send_text" rows=""></textarea>
        </div>
        <div class="send_clear">
            <a class="send_but" onclick="sendContent()" accesskey="c">
                发送
            </a>
        </div>
    </div>
    <!--右，好友列表区-->
    <div class="friend_area" align="center">
        <form id="form">
            <input type="text" id="playerName" value="000" required="true">
            <input type="text" id="password" value="000" required="true"><br>
            <input class="login_btn" type="button" value="登录" id="login">
            <input class="login_btn" type="button" value="注册" id="register">
        </form>
    </div>
    <!--  <div class="close_but">

      </div>-->
</div>
<script type="text/javascript">
    var socket = null;
    function registerData() {
        //发送请求
        //消息体对象
        var PlayerHttpRequest = {
            playerName: $("#playerName").val(),
            passward: $("#password").val()
        }
        //请求对象
        var HttpRequest = {
            //玩家模块
            module: 1,
            //注册登录
            cmd: 1,
            requestData: JSON.stringify(PlayerHttpRequest)
        };
        var result = JSON.stringify(HttpRequest);
        //console.log(result);
        return result;
    }

    //登录事件,表单的submit事件会刷新页面
    function loginData() {
        //发送请求
        //消息体对象
        var PlayerHttpRequest = {
            playerName: $("#playerName").val(),
            passward: $("#password").val()
        }
        //请求对象
        var HttpRequest = {
            //玩家模块
            module: 1,
            //注册登录
            cmd: 2,
            requestData: JSON.stringify(PlayerHttpRequest)
        };
        var result = JSON.stringify(HttpRequest);
        //console.log(result);
        return result;
    }


    function sendData() {
        var send_text = document.getElementById("send_text").value;
        //消息体对象
        var ChatHttpRequest = {
            targetPlayerId: null,
            context: send_text
        }
        //请求对象
        var HttpRequest = {
            //聊天模块
            module: 2,
            //广播聊天
            cmd: 1,
            requestData: JSON.stringify(ChatHttpRequest)
        };
        //var result = JSON.stringify(HttpRequest);
        return result;
    }
    //注册事件
    $("#register").click(function () {
        //准备登录数据
        var result = registerData();
        connection(result);

    });

    //登录事件
    $("#login").click(function () {
        //准备登录数据
        var result = loginData();
        connection(result);

    });

    function connection(result) {
        if (socket == null) {
            socket = new WebSocket("ws://127.0.0.1:10103/ws");
        }else{
            //发送消息
            if(socket.readyState == WebSocket.OPEN){
                socket.send(result);
            }else{
                console.log("连接没有开启");
            }
        }

        //var socket = new SockJS('localhost:10102/ws');
        socket.onmessage = function (event) {
            var ul = document.getElementById("chart_msg");
            var li = document.createElement("li");
            var div1 = document.createElement("div");
            var div2 = document.createElement("div");
            var span = document.createElement("span");
            span.style.paddingLeft = "20px";
            span.style.marginLeft = "20px";
            span.style.width = "230px";
            span.style.overflow = "hidden";
            span.style.marginTop = "20px";
            if(event.data){
                span.innerHTML = event.data;
                console.log(JSON.stringify(event.data));

            }
            var img = document.createElement("img");
            img.src = "../static/image/timg.jpg";
            div2.style.backgroundColor = "white";
            div2.style.minHeight = "70px";
            div2.style.width = "250px";
            div2.style.borderRadius = "10px";
            div2.className = "chart_text";
            div1.className = "head_img";
            div1.appendChild(img);
            div2.appendChild(span);
            li.appendChild(div1);
            li.appendChild(div2);
            ul.appendChild(li);
        };
        socket.onopen = function (event) {
            console.log("open");
            socket.send(result);
        };

        socket.onclose = function (event) {
            console.log("close");
        };
    }


    //发送消息
    function sendContent() {
        //var result = sendData();
       // console.log(result);
        var send_text = document.getElementById("send_text").value;
        //消息体对象
        var ChatHttpRequest = {
            targetPlayerId: null,
            context: send_text
        }
        //请求对象
        var HttpRequest = {
            //聊天模块
            module: 2,
            //广播聊天
            cmd: 1,
            requestData: JSON.stringify(ChatHttpRequest)
        };
        var ul = document.getElementById("chart_msg");
        var li = document.createElement("li");
        var div1 = document.createElement("div");
        var div2 = document.createElement("div");
        var span = document.createElement("span");
        span.style.paddingLeft = "20px";
        span.style.marginLeft = "20px";
        span.style.width = "230px";
        span.style.overflow = "hidden";
        span.style.marginTop = "20px";
        span.innerHTML = send_text;
        var img = document.createElement("img");
        img.src = "../static/image/timg1.jpg";
        div2.style.backgroundColor = "white";
        div2.style.minHeight = "70px";
        div2.style.width = "250px";
        div2.style.borderRadius = "10px";
        div2.className = "chart_text";
        div1.className = "head_img";
        div1.appendChild(img);
        div2.appendChild(span);
        li.appendChild(div1);
        li.appendChild(div2);
        ul.appendChild(li);
        //发送消息
        if(socket.readyState == WebSocket.OPEN){
            console.log("ss");
            socket.send(JSON.stringify(HttpRequest));
        }else{
            console.log("连接没有开启");
        }



    }

</script>
</body>
</html>